<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset="utf-8">

  <link href="/css/phylotree.css" rel="stylesheet">

  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="/css/highlight.min.css">

  <script src="/js/jquery.js"></script>
  <script src="/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="/js/highlight.min.js">
  <script src="/js/d3.v3.min.js"></script>
  <script src="/js/underscore-min.js"></script>
  <script src="/phylotree.min.js"></script>
  <style>
#code {
  display: inline-block;
  width: 700px;
  padding-left: 50px;
}
  </style>
</head>
</head>

<body>
  <svg id="tree_display"></svg>
  <div id="code"><pre><code class="javascript">d3.text("yokoyama.nwk", function(error, newick) {
  var height = 400,
    width = 400,

    tree = d3.layout.phylotree()
    .svg(d3.select("#tree_display"))
    .options({
      'left-right-spacing': 'fit-to-size',
      // fit to given size top-to-bottom
      'top-bottom-spacing': 'fit-to-size',
      // fit to given size left-to-right
      'selectable': false,
      // make nodes and branches not selectable
      'collapsible': false,
      // turn off the menu on internal nodes
      'transitions': false
      // turn off d3 animations
    })
    .size([height, width])
    .node_circle_size(0); // do not show "circles" at internal nodes

  tree(newick)
    // parse the Newick into a d3 hierarchy object with additional fields
    // generate node coordinates
    .layout();
  // render the tree

});</code></pre></div>

  <script>
    d3.text("yokoyama.nwk", function(error, newick) {
      var height = 400,
        width = 400,

        tree = d3.layout.phylotree()
        .svg(d3.select("#tree_display"))
        .options({
          'left-right-spacing': 'fit-to-size',
          // fit to given size top-to-bottom
          'top-bottom-spacing': 'fit-to-size',
          // fit to given size left-to-right
          'selectable': false,
          // make nodes and branches not selectable
          'collapsible': false,
          // turn off the menu on internal nodes
          'transitions': false
          // turn off d3 animations
        })
        .size([height, width])
        .node_circle_size(0); // do not show "circles" at internal nodes

      tree(newick)
        // parse the Newick into a d3 hierarchy object with additional fields
        // generate node coordinates
        .layout();
      // render the tree

    });

    // for syntax highlighting
    hljs.initHighlightingOnLoad();
  </script>

</body>

</html>
